Partial Views এবং View Components

Web Development - এএসপি ডট (ASP.Net) - ভিউ (Views) এবং HTML Helpers |
2
2

ASP.Net MVC এবং ASP.Net Core MVC অ্যাপ্লিকেশনে Partial Views এবং View Components দুইটি অত্যন্ত শক্তিশালী ফিচার, যা আপনার অ্যাপ্লিকেশনের ভিউ লজিক এবং UI রেন্ডারিংকে আরও কার্যকর ও পুনঃব্যবহারযোগ্য করতে সহায়তা করে। এগুলো একে অপরের থেকে আলাদা হলেও, দুটি উপাদানই ডাইনামিক কন্টেন্ট রেন্ডার করতে এবং কোড পুনঃব্যবহারযোগ্যতা নিশ্চিত করতে ব্যবহৃত হয়।


Partial Views

Partial View হলো একটি ছোট, পুনঃব্যবহারযোগ্য ভিউ যা অন্য ভিউয়ের মধ্যে ইনক্লুড করা যায়। এটি পুরো পেজ রেন্ডার করার পরিবর্তে, শুধু একটি নির্দিষ্ট অংশ রেন্ডার করার জন্য ব্যবহৃত হয়। Partial Views সাধারণত ছোট UI উপাদান (যেমন, ফর্ম, টেবিলের সারি, ন্যাভিগেশন বার) রেন্ডার করার জন্য উপকারী।

Partial View এর ব্যবহার

  1. Partial View তৈরি করা

    প্রথমে, আপনার ভিউ ফোল্ডারে একটি Partial View তৈরি করতে হবে। এটি একটি সাধারণ .cshtml ফাইল যা আপনার UI অংশ ধারণ করে।

    উদাহরণ:

    <!-- _ProductList.cshtml -->
    @model IEnumerable<Product>
    
    <ul>
    @foreach(var product in Model)
    {
        <li>@product.Name - @product.Price</li>
    }
    </ul>
    

    এখানে, _ProductList.cshtml একটি Partial View যা Product মডেলের একটি লিস্ট রেন্ডার করে।

  2. Partial View ইনক্লুড করা

    এখন, আপনি এই Partial View কে অন্য একটি ভিউয়ের মধ্যে ইনক্লুড করতে পারবেন।

    উদাহরণ:

    <!-- Index.cshtml -->
    @model IEnumerable<Product>
    
    <h2>Product List</h2>
    @Html.Partial("_ProductList", Model)
    

    এখানে, @Html.Partial() ব্যবহার করে _ProductList.cshtml নামের Partial View ইনক্লুড করা হয়েছে।

    আপনি যদি নির্দিষ্ট ডেটা না পাঠাতে চান, তবে আপনি কেবল @Html.Partial("_ProductList") ব্যবহার করতে পারেন, যদি আপনার Partial View এ কোন মডেল পাস করার প্রয়োজন না হয়।

  3. Ajax ব্যবহার করে Partial View রেন্ডারিং

    আপনি Ajax এর মাধ্যমে ডাইনামিকভাবে Partial View রেন্ডার করতে পারেন, যেমন:

    $.ajax({
        url: '/Home/GetProducts',
        success: function(result) {
            $('#productListContainer').html(result);
        }
    });
    

    এখানে, HomeController থেকে AJAX কল করে পণ্য তালিকা আনা হচ্ছে এবং ডোম-এ রেন্ডার করা হচ্ছে।


View Components

View Components হলো আরও শক্তিশালী এবং নমনীয় উপাদান, যা Partial Views এর তুলনায় বেশি লজিকাল এবং ডাইনামিক। এটি আসলে একটি C# ক্লাস যা ভিউয়ের মধ্যে রেন্ডার করার জন্য ডেটা প্রক্রিয়াকরণ এবং লজিকাল কাজ সম্পাদন করতে ব্যবহৃত হয়। View Components সাধারণত একাধিক Partial View এর সমন্বয়ে একটি ডাইনামিক UI উপাদান তৈরি করে এবং ডেটা কন্ট্রোলার থেকে সরাসরি পাঠানোর পরিবর্তে, নিজস্ব লজিক প্রয়োগ করে ডেটা রেন্ডার করে।

View Component এর ব্যবহার

  1. View Component তৈরি করা

    প্রথমে, একটি View Component ক্লাস তৈরি করতে হবে। এটি একটি সাধারণ C# ক্লাস যা ViewComponent থেকে ইনহেরিট করবে।

    উদাহরণ:

    public class ProductListViewComponent : ViewComponent
    {
        private readonly ApplicationDbContext _context;
    
        public ProductListViewComponent(ApplicationDbContext context)
        {
            _context = context;
        }
    
        public IViewComponentResult Invoke()
        {
            var products = _context.Products.ToList();
            return View(products);  // Return the view with products
        }
    }
    

    এখানে, ProductListViewComponent ক্লাসটি ডেটাবেস থেকে পণ্য তালিকা নিয়ে আসে এবং তা ভিউতে পাঠায়।

  2. View Component এর জন্য ভিউ তৈরি করা

    View Component এর জন্য ভিউ ফাইল তৈরি করতে হয়, যেটি Views/Shared/Components/ComponentName/Default.cshtml ফোল্ডারে রাখা হয়।

    উদাহরণ:

    <!-- Views/Shared/Components/ProductList/Default.cshtml -->
    @model IEnumerable<Product>
    
    <ul>
    @foreach(var product in Model)
    {
        <li>@product.Name - @product.Price</li>
    }
    </ul>
    
  3. View Component ব্যবহার করা

    এখন, আপনি আপনার ভিউয়ের মধ্যে ViewComponent রেন্ডার করতে পারেন:

    <!-- Any View (e.g., Index.cshtml) -->
    <h2>Product List</h2>
    @Component.InvokeAsync("ProductList")
    

    এখানে, @Component.InvokeAsync("ProductList") দ্বারা ProductListViewComponent ইনভোক করা হচ্ছে এবং তার Default.cshtml ভিউটি রেন্ডার করা হচ্ছে।


Partial Views এবং View Components এর মধ্যে পার্থক্য

বৈশিষ্ট্যPartial ViewsView Components
প্রকৃতিHTML কন্টেন্টের পুনঃব্যবহারযোগ্য অংশC# লজিক সহ ডাইনামিক ডেটা রেন্ডার করে
ডেটাডেটা সরাসরি পাস করা হয়নিজস্ব লজিক ব্যবহার করে ডেটা প্রক্রিয়া করা হয়
রেন্ডারিংসরাসরি @Html.Partial() ব্যবহার করে রেন্ডার করা হয়@Component.InvokeAsync() বা @Component.Invoke() ব্যবহার করে রেন্ডার করা হয়
লজিকসাধারণত কনট্রোলারের মাধ্যমে ডেটা পাস করা হয়ভিউ কম্পোনেন্টে নিজস্ব লজিক থাকে
ব্যবহারছোট UI উপাদান রেন্ডার করতে ব্যবহৃত হয়জটিল ডাইনামিক কন্টেন্ট এবং লজিক রেন্ডার করতে ব্যবহৃত হয়

সারাংশ

Partial Views এবং View Components দুটি গুরুত্বপূর্ণ টুল, যেগুলো ASP.Net MVC বা ASP.Net Core MVC অ্যাপ্লিকেশনগুলোর ডাইনামিক এবং পুনঃব্যবহারযোগ্য UI কম্পোনেন্ট তৈরিতে সহায়তা করে। Partial Views সাধারণ UI অংশগুলোর জন্য উপকারী, যেখানে View Components বেশি কাস্টমাইজড লজিক এবং ডাইনামিক কন্টেন্ট রেন্ডারিংয়ের জন্য ব্যবহার করা হয়।

Content added By
Promotion